<template lang="">
  <div>
    <p>商品数:{{ productnum }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 用户数:{{ usernum }}</p>
    <div ref="simpleData" style="width: 500px; height: 400px"></div>
    <div ref="kData" style="width: 500px; height: 400px"></div>
  </div>
</template>
<script>
import { simpleDataRequest, kDataRequest, productNumRequest, userNumRequest } from '@/api/home'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      productnum: 0,
      usernum: 0
    }
  },
  methods: {
    simpleData() {
      simpleDataRequest().then((res) => {
        let arr1 = []
        let arr2 = []
        res.data.data.forEach((i, v) => {
          arr1.push(i.x)
          arr2.push(i.val)
        })
        let myChart = echarts.init(this.$refs.simpleData)
        var option = {
          xAxis: {
            type: 'category',
            data: arr1
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: arr2,
              type: 'line'
            }
          ]
        }
        option && myChart.setOption(option)
      })
    },
    kData() {
      kDataRequest().then((res) => {
        let myChart = echarts.init(this.$refs.kData)
        let option = {
          xAxis: {
            data: res.data.data.x
          },
          yAxis: {},
          series: [
            {
              type: 'candlestick',
              data: res.data.data.val
            }
          ]
        }

        option && myChart.setOption(option)
      })
    },
    productNum() {
      productNumRequest().then((r) => {
        this.productnum = r.data.data
      })
    },
    userNum() {
      userNumRequest().then((r) => {
        this.usernum = r.data.data
      })
    }
  },

  mounted() {
    this.simpleData()
    this.kData()
    this.productNum()
    this.userNum()

  //   let url =
  //     '/mi-test/common/homeishop/v1/goods/puzzle_goods_info?puzzle_id=mall_cn__1709290768&component_id=pz-eWUweyahLE'

  //   axios.get(url).then((r) => {
  //     console.log(r.data)
  //   })
  }
}
</script>
<style lang="css" scoped>
div {
  display: inline-block;
}
</style>
